<template>
	<a-spin dot :loading="loading">
		<a-watermark class="watermark" content="张泽" grayscale>
			<view class="top-menu">
				<a-menu mode="horizontal" :selected-keys="active" @menu-item-click="menuClick">
					<a-menu-item key="0">
						<template #icon><icon-home /></template>一楼
					</a-menu-item>
					<a-menu-item key="1">
						二楼</a-menu-item>
					<a-menu-item key="2">
						三楼</a-menu-item>
					<a-menu-item key="3">
						四楼</a-menu-item>
				</a-menu>
			</view>

			<view class="task-list">
				<view v-if="dataLoading" style="display: flex;justify-content: center;margin-bottom: 10px;">
					<view class="loader"></view>
				</view>
				<MuseumItem v-for="task in dataList" :key="task.id" :info="task" />
			</view>
		</a-watermark>
	</a-spin>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import MuseumItem from '@/components/MuseumItem.vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import RawData from '../RawData.json'

	const dataList = ref([]);
	const active = ref('')
	const selectedKeys = ref([])
	const loading = ref(true);
	const dataLoading = ref(false)

	onLoad(options => {
		setTimeout(() => {
			menuClick(options.active || '0')
			loading.value = false
		}, 300)
	})

	const menuClick = (e) => {
		if (e == active.value) {
			console.log('重复点击')
			return
		}
		dataList.value = []
		dataLoading.value = true
		active.value = e
		selectedKeys.value = [e]
		setTimeout(() => {
			dataList.value = RawData[e].items
			dataLoading.value = false
		}, 400)
	}
</script>

<style scoped lang="scss">
	.top-menu {
		text-align: center;
		display: flex;
		justify-content: center;
		position: fixed;
		width: 100vw;
		top: 0;
		z-index: 6;
	}



	.task-list {
		padding: 72px 20px 12px;

		.loader {
			width: 32px;
			height: 32px;
			position: relative;
			animation: rotate 1.5s ease-in infinite alternate;
		}

		.loader::before {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			color: #165DFF;
			background: currentColor;
			width: 32px;
			height: 16px;
			border-radius: 0 0 50px 50px;
		}

		.loader::after {
			content: '';
			position: absolute;
			left: 50%;
			top: 10%;
			background: #FFF;
			width: 4px;
			height: 32px;
			animation: rotate 1.2s linear infinite alternate-reverse;
		}

		@keyframes rotate {
			100% {
				transform: rotate(360deg)
			}
		}

	}

	::v-deep .arco-menu-overflow-wrap {
		display: flex !important;
		justify-content: center !important;
	}
</style>